<script setup>
    import { onMounted } from 'vue'
    import { getRusticList } from '@/api/govern'
    import { useStore } from 'vuex'
    import DisabledList from './DisabledList.vue'
    import DbList from './DbList.vue'
    import VeteranList from './VeteranList.vue'
    import WbList from './WbList.vue'

    import AccountDetails from '../AccountDetails.vue'

    const store = useStore()

    let tabbarData = ['残疾人', '低保户', '退役军人', '五保户']


    // 当前tabbar index
    let currentIndex = $ref(0)

    let dialogVisible = $ref(false)

    const handleClickTabbar = (index) => {
        currentIndex = index
    }

    // 默认村code
    let sysOrgCode = $ref('')
    
    // 显示详情
    const showDetails = (index) => {
        // sysOrgCode = code

        if(index > tabbarData.length-1){
            return 
        }

        currentIndex = index
        dialogVisible = true
    }

    onMounted(() => {
        // 村列表
        getRusticList().then(res => {
            store.state.villageList = res.result
        })

    })

     // 户况详情
    let accountDetails = $ref(null)

    // 点击详情 
    const handleClickDetials = (id) => {
        accountDetails.showAccoutDetails(id, 'special')
    }



    defineExpose({
        showDetails
    })

</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        v-if="dialogVisible"
        width="1300px"
        custom-class="xz-dialog"
    >
        <div class="dialog-title">{{ '特殊人群 - ' + tabbarData[currentIndex]  }}</div>

        <!-- <div class="tabbar-wrap">
            <div 
                class="tabbar-item"
                v-for="(item, index) in tabbarData" 
                :key="index"
                :class="{ active: currentIndex == index }"
                @click="handleClickTabbar(index)"
            >
                {{ item }}
            </div>
        </div> -->

        <div class="mt20">
            <!-- 残疾人 -->
            <disabled-list :sysOrgCode="sysOrgCode" v-if="currentIndex == 0" @handleClickDetials="handleClickDetials"></disabled-list>
    
            <!-- 低保 -->
            <db-list :sysOrgCode="sysOrgCode" v-if="currentIndex == 1" @handleClickDetials="handleClickDetials"></db-list>
    
            <!-- 退役军人 -->
            <veteran-list :sysOrgCode="sysOrgCode" v-if="currentIndex == 2" @handleClickDetials="handleClickDetials"></veteran-list>
    
            <!-- 五保户 -->
            <wb-list :sysOrgCode="sysOrgCode" v-if="currentIndex == 3" @handleClickDetials="handleClickDetials"></wb-list>
        </div>

    </el-dialog>

    <!-- 户况详情 -->
    <account-details ref="accountDetails"></account-details>

</template>

<style lang="less">
    .xz-dialog .tabbar-wrap{
        display: inline-block;
        border: 1px solid #179FFF;
        color: #179FFF;
        border-radius: 4px;
        margin-bottom: 20px;

        .tabbar-item{
            display: inline-block;
            padding: 10px 20px;
            border-right: 1px solid #179FFF;
            cursor: pointer;

            &.active{
                color: #fff;
                background: #179FFF;
            }
        }
    }
</style>